<template>
  <div class="tabBar" id="tabBar">
    <div
      class="tabItem"
      :id="currentIndex == item.index ? 'currentTab' : ''"
      v-for="item in currentTab"
      :key="item.index"
      @click="setCurrentIndex(item.index)"
    >
      {{ item.label }}
    </div>
  </div>

  <!-- 页面选项 -->
  <PageOption :currentIndex="currentIndex"></PageOption>
</template>

<script lang="tsx" setup>
import { defineComponent, ref, onMounted } from 'vue'

import AiServiceRecord from './AiServiceRecord/aiServiceRecord.vue'
import AiPictureComparison from './AiPictureComparison/aiPictureComparison.vue'
import { JSX } from 'vue/jsx-runtime'

onMounted(() => {
  // 获取容器元素
  const container = document.getElementById('tabBar')
  // 监听容器的滚动事件
  container.addEventListener('wheel', function (event: any) {
    // 阻止默认的滚动行为
    event.preventDefault()
    // 滚动的距离，根据滚动方向确定
    let delta = event.deltaY || event.detail || -event.wheelDelta
    // 设置容器的滚动位置
    container.scrollLeft += delta
  })
})

const currentIndex = ref<number>(1)
const setCurrentIndex = (index: number) => (currentIndex.value = index)
const currentTab = [
  { index: 1, label: 'AI服务日志' },
  { index: 2, label: 'AI图像对比' },
]

const PageOption = defineComponent({
  props: {
    currentIndex: { type: Number, default: 1 },
  },
  setup(props) {
    // 页面组件列表
    const option: { [key: number]: JSX.Element } = {
      1: <AiServiceRecord />,
      2: <AiPictureComparison />,
    }

    return () => <slot> {option[props.currentIndex]}</slot>
  },
})
</script>

<style lang="less" scoped>
.tabBar {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  // justify-content: flex-end;
  border-bottom: 2px solid #e1e3e4;
  margin-bottom: 4px;
  user-select: none;
  overflow-x: auto;
  white-space: nowrap;
  &::-webkit-scrollbar {
    display: none;
  }

  > .tabItem {
    padding: 4px 30px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 17px;
    font-weight: bold;
    color: #606266;
    &:hover {
      background-color: #e4e4e4;
    }
  }

  > #currentTab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    color: #7db6bf;
    &::after {
      content: '';
      height: 4px;
      width: 100%;
      background-color: #7db6bf;
      position: absolute;
      bottom: -3px;
      border-radius: 8px;
    }
  }
}
</style>
